<template>
    <div class="main">
        <div class="loginBox">
            <Form :option="loginFormConfig" @model="register"></Form>
        </div>
    </div>
</template>
<script setup lang="jsx">
import Form from "../../components/Form/index.vue";
import { useLoginStore } from "../../store/login";
import { ElButton, ElCheckbox, ElMessage } from "element-plus";
import { useRouter } from "vue-router";
const { push } = useRouter()
import { ref } from "vue";
import { useForm } from "../../hooks/useForm";
const { register, FormParams } = useForm()
const remberMe = ref(false)
const Login = useLoginStore()
const loginFormConfig = [
    {
        component: 'custom',
        slots: () => {
            return <h3 style="text-align:center;width:100%">登陆</h3>
        }

    },
    {
        field: 'username',
        label: "用户名",
        component: 'input',
    }, {
        field: 'password',
        label: "密码",
        component: 'password',
    },
    {
        component: 'custom',
        slots: () => {
            return <div style="text-align:left;width:100%"><ElCheckbox onClick={remberMeFn} label="记住密码"></ElCheckbox></div>
        }
    },
    {
        component: 'custom',
        slots: () => {
            return <div style="text-align:center;width:100%"><ElButton style="width:150px" onClick={doLogin} type="primary">登陆</ElButton></div>
        }

    },
]

// 记住我
function remberMeFn() {
    remberMe.value = !remberMe.value
}
function doLogin() {
    console.log(remberMe.value)
    if (!FormParams.value.username && !FormParams.value.password) {
        //    提示报错  用户名或密码不能为空
        ElMessage.error("用户名或密码不能为空")
    } else {
        Login.doLogin(FormParams.value.username, FormParams.value.password).then(e => {
            Login.setRember(remberMe.value, FormParams.value.username, FormParams.value.password)
            // 提示登陆成功 跳转到首页 
            ElMessage.success("登陆成功")
            //跳转到首页
            push("/")

        })
    }
    console.log(FormParams.value)
    console.log("点击了登陆")
}
</script>
<style scoped>
.main {
    width: 100vw;
    height: 100vh;
    background-color: #f4f5f7;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loginBox {
    width: 400px;
    height: 250px;
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
}
</style>